<template>
	<view class="personalContainer">
		<view class="user-section">
			<image class="bg" :src="userInfo.backgroundUrl?userInfo.backgroundUrl:'/static/images/personal/bgImg2.jpg'"></image>
			<view class="user-info-box">
			<view class="portrait-box" @tap="goLogin">
				<image class="portrait" :src="userInfo.avatarUrl?userInfo.avatarUrl:'/static/images/personal/missing-face.png'"></image>
			</view>
			<view class="info-box">
				<text class="username">{{userInfo.nickname?userInfo.nickname:'游客'}}</text>
				<view class="introduction">简介：{{userInfo.signature?userInfo.signature:'这个人很有个性，什么都没留下'}}</view>
			</view>
			</view>
		</view>
		<view class="cover-container" 
		@touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"
		:style="{ 'transform': coverTransform ,'transition': coverTransition} ">
			<image class="arc" src="/static/images/personal/arc.png"></image>
			<!-- 个人中心导航 -->
			<view class="nav-section">
				<view class="nav-item"  hover-class="common-hover"  hover-stay-time="50">
					<text class="iconfont icon-xiaoxi2"></text>
					<text>我的消息</text>
				</view>
				<view class="nav-item"   hover-class="common-hover" hover-stay-time="50">
					<text class="iconfont icon-wodehaoyou1"></text>
					<text>我的好友</text>
				</view>
				<view class="nav-item"  hover-class="common-hover"  hover-stay-time="50">
					<text class="iconfont icon-gerenzhuye1"></text>
					<text>个人主页</text>
				</view>
				<view class="nav-item" hover-class="common-hover"  hover-stay-time="50">
					<text class="iconfont icon-gexingzhuangban1"></text>
					<text>个性装扮</text>
				</view>
	    </view>
	
	    <!-- 个人中心列表 -->
	    <view class="personalContent">
			<view class="recentPlayContainer">
				<text class="title">最近播放</text>
				<!-- 最近播放记录 -->
				<scroll-view class="recentScroll" scroll-x v-if="recentPlayList.length" enable-flex>
					<view class="recentItem" @tap="toSongDetail(item.song.id,index)" v-for="(item,index) in recentPlayList" :key="index">
						<image :src="item.song.al.picUrl"></image>
						<text>{{item.song.name}}</text>
					</view>
				</scroll-view>
				<view v-else class="txt">{{msg}}</view>
			</view>
			<view class="cardList">
				<view class="likeMusic" @tap="toSongSheetDetail(userLikeMusic.id)" v-if="userSongSheetInfo.length">
					<image :src="userLikeMusic.coverImgUrl"></image>
					<view class="likeMusicInfo">
						<text class="title">我喜欢的音乐</text>
						<text class="des">总共{{userLikeMusic.trackCount}}首</text>
					</view>
				</view>
				<view v-else class="txt1">登录查看您喜欢的音乐</view>
				<view class="card-item" v-if="userSongSheet.length">
					<text class="title">我的歌单({{userSongSheet.length}}个)</text>
					<scroll-view class="songSheetScroll">
						<view class="scrollItem" v-for="item in userSongSheet" :key="item.id"
						@tap="toSongSheetDetail(item.id)">
							<image :src="item.coverImgUrl"></image>
							<view class="mySongSheet">
								<text>{{item.name}}</text>
								<text class="des">{{item.trackCount}}首</text>
							</view>
						</view>
					</scroll-view>
					
				</view>
				<view v-else class="txt2">暂无收藏歌单</view>
				<view class="card-item" v-if="userCollectionSongSheet.length">
					<text class="title">收藏歌单({{userCollectionSongSheet.length}}个)</text>
					<scroll-view class="songSheetScroll">
						<view class="scrollItem" v-for="item in userCollectionSongSheet" :key="item.id"
						@tap="toSongSheetDetail(item.id)">
							<image :src="item.coverImgUrl"></image>
							<view class="mySongSheet">
								<text>{{item.name}}</text>
								<text class="des">{{item.trackCount}}首</text>
							</view>
						</view>
					</scroll-view>
				</view>
				<view v-else class="txt3">暂无创建歌单</view>
			</view>
	    </view>
	</view>
	</view>
</template>

<script>
	let startY = 0 // 手指起始的坐标
	let moveY = 0	// 手指移动的坐标
	let moveDistance = 0 // 手指移动的距离
	
	export default {
		data() {
			return {
				coverTransform: 'translateY(0)',// transform移动的属性
				coverTransition:'',	// 动画过度效果
				userInfo: {}, //用户信息
				recentPlayList:[],	// 根据uid获取播放记录
				msg:'', // 提示最近播放状态信息
				index: 0, // 点击音乐的下标
				userSongSheetInfo:[], // 用户的歌单信息
				userLikeMusic:{},// 用户喜欢的音乐
				userSongSheet:[],// 用户的歌单
				userCollectionSongSheet:[],// 用户收藏歌单
				songId:''
			}
		},
		// 监听页面加载,只执行一次
		onLoad() {
			this.userInfoList() // 获取用户信息
			this.msg = '请登录查看播放记录'
			this.getUserSongSheetInfo(this.userInfo.userId) // 获取用户的歌单信息
			
			uni.$on('switchType',(type) => {
				console.log(type,'我要切歌了');
				if(type === 'pre'){ // 切换上一首
					(this.index === 0) && (this.index = this.recentPlayList.length)
					this.index -= 1
					this.songId = this.recentPlayList[this.index].song.id
				}else {// 切换下一首
					if(this.index === this.recentPlayList.length - 1) {this.index = -1}
					this.index += 1
					this.songId = this.recentPlayList[this.index].song.id
				}
				let musicId = this.recentPlayList[this.index].song.id
				if(this.songId == musicId){		uni.$emit('musicId',musicId)	}
				
			})	
		},
		
		methods:{
			// 定义手指滑动三剑客
			handleTouchStart(event){
				// 获取起始位置
				this.startY = event.touches[0].clientY
				// console.log(this.startY)
				// 每次滑动开始,清空滑动效果
				this.coverTransition = ''
			},
			handleTouchMove(event){
				// touches[0]捕捉第一个手指 clientY y轴坐标
				this.moveY = event.touches[0].clientY
				this.moveDistance = this.moveY - this.startY
				// console.log(this.moveY)
				// console.log(this.moveDistance)
				// 移动距离小于等于0 使其不能往上移动
				if(this.moveDistance <= 0){return}
				// 可以往下移,倒是只能移动80个像素
				if(this.moveDistance >= 80){this.moveDistance = 80}
				// 用C3属性transform设置位移 把移动
				this.coverTransform = `translateY(${this.moveDistance}rpx)`
			},
			handleTouchEnd(){
				// 松开后返回原位置
				this.coverTransform = 'translateY(0)'
				// 过度效果
				this.coverTransition = 'transform 1s linear'
			},
			// 跳转到登录页面
			goLogin() {
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			
			// 用户信息的存储
			userInfoList() {
				// 读取在login页面存储的用户信息
				let userInfos = uni.getStorageSync('userInfo')
				if(userInfos) {
					this.userInfo = JSON.parse(userInfos)
					// 获取用户播放记录 的封装方法
					this.getUserRecentPlay(this.userInfo.userId)
					console.log(this.userInfo.userId);
					this.msg = '隐私已设置仅自己观看'
				}else {
					this.msg = '暂无播放记录'
				}
			},
			// 获取用户播放记录
			async getUserRecentPlay(userId) {
				// type为1是最近一周 为0是全部播放记录
				let res = await this.$myRequest('/user/record?uid='+userId+'&type=1')
				
				// slice(0,10) 从0开始截取20条数据
				// this.recentPlayList = res.allData.slice(0,20)
				this.recentPlayList = res.weekData
				// console.log(this.recentPlayList);
				console.log(res)
			},
			// 获取用户的歌单
			async getUserSongSheetInfo(userId){
				// /user/playlist?uid=267163446
				let res = await this.$myRequest('/user/playlist?uid='+userId)
				this.userSongSheetInfo = res.playlist
				/**处理的方法：
				 *  一般this.userSongSheetInfo第一个数组是用户喜欢的音乐
				 * 在排除第一个后，this.userSongSheetInfo下的subscribed 
				 * 	为 true 就是用户收藏的歌单,
				 * 为 false 就是用户创建的歌单
				 * */
				// 处理用户喜欢的音乐
				this.userLikeMusic = this.userSongSheetInfo[0] // 把第一个先赋值给喜欢的音乐数组
				// console.log(userLikeMusic);
				console.log(this.userSongSheetInfo,'44');
				// 修改原数组,删除第一个 把剩下的赋值给userSongsheet
				let userSongsheet = this.userSongSheetInfo.splice(1) 
				// console.log(userSongsheet,'55');
				// forEach()相当于for(let item in userSongsheet)
				userSongsheet.forEach(item => {
					if(item.subscribed == true){// 处理用户收藏的歌单
						this.userCollectionSongSheet.push(item)
					}else{// 处理用户创建的歌单 
						this.userSongSheet.push(item)
					}
				})
				// 最后把处理好的数据存储到本地，就不用再每次发请求了
				// uni.setStorageSync('userLikeMusic', this.userLikeMusic)
				// uni.setStorageSync('userSongSheet', this.userSongSheet)
				// uni.setStorageSync('userCollectionSongSheet', this.userCollectionSongSheet)
			},
			// 点击跳转到歌单详情页
			toSongSheetDetail(songSheetId){
				uni.navigateTo({
					url:'/pages/songSheetDetail/songSheetDetail?songSheetId=' + songSheetId
				})
			},
			// 点击播放最近播放歌曲
			toSongDetail(songId,index){
				this.index = index
				this.songId = songId
				uni.navigateTo({
					url:'/pages/songDetail/songDetail?songId=' + songId
				})
			}
		},
		
	}
</script>

<style lang="scss">
	
	.personalContainer {
		width: 100%;
		height: 100%;
		
		.user-section {
			height: 520rpx;
			position: relative;
			padding: 100rpx 30rpx 0;
			
			.bg {
			  position: absolute;
			  left: 0;
			  top: 0;
			  width: 100%;
			  height: 100%;
			  // opacity: 0.7;
			  // filter: blur(1px);
			}
			
			.user-info-box{
				height: 180rpx;
				display:flex;
				align-items:center;
				position:relative;
				z-index: 1;
				
				.portrait{
					width: 130rpx;
					height: 130rpx;
					border:5rpx solid #fff;
					border-radius: 50%;
				}
				
				.username{
					font-size: 40rpx;
					color: #303133;
					margin-left: 20rpx;
				}
				.introduction {
					font-size: 24rpx;
					color: #c3c3c3;
					margin-left: 20rpx;
				}
			}
			/* vip-box */
			.vip-card-box {
				position: relative;
				display: flex;
				flex-direction: column;
				background: rgba(0, 0, 0, .7);
				height: 240rpx;
				color: #f7d680;
				border-radius: 16rpx 16rpx 0 0;
				padding: 20rpx 24rpx;
				
				.card-bg{
					position:absolute;
					top: 20rpx;
					right: 0;
					width: 380rpx;
					height: 260rpx;
				}
				.b-btn{
					position: absolute;
					right: 20rpx;
					top: 16rpx;
					width: 132rpx;
					height: 40rpx;
					text-align: center;
					line-height: 40rpx;
					font-size: 22rpx;
					color: #36343c;
					border-radius: 20px;
					background: #f9e6af;
					z-index: 1;
				}
				.tit {
					font-size: 22rpx;
					color: #f7d680;
					margin-bottom: 28rpx;
					
					.iconfont{
						color: #f6e5a3;
						margin-right: 16rpx;
					}
				}
				.e-m{
					font-size: 34rpx;
					margin-top: 10rpx;
				}
				.e-b{
					font-size: 24rpx;
					color: #d8cba9;
					margin-top: 10rpx;
				}
			}
		}
		
		.cover-container{
			margin-top: -300rpx;
			padding: 0 30rpx;
			position:relative;
			background: #f5f5f5;
			padding-bottom: 20rpx;
						
			.arc{
				position:absolute;
				left: 0;
				top: -34rpx;
				width: 100%;
				height: 36rpx;
			}
			/* 导航部分 */
			.nav-section {
				display: flex;
				background: #fff;
				padding: 20rpx 0;
				border-radius: 15rpx;
				
				.nav-item {
					width: 25%;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					align-items: center;
					
					.iconfont {
						font-size: 50rpx;
						color: #0099ff;
						line-height: 70rpx;
					}
					.icon-gexingzhuangban1{
						font-size: 60rpx;
					}
					text:last-child {
						font-size: 22rpx;
					}
				}
			}
			/* 个人中心列表 */
			.personalContent {
				background: #fff;
				margin-top: 20rpx;
				
				.scrollView {
					display: flex;
					height: 160rpx;
				}
				.recentPlay {
					display: flex;
					
					image {
						width: 160rpx;
						height: 160rpx;
						margin-left: 20rpx;
						border-radius: 20rpx;
					}
				}
				.recentPlayContainer{
					
					.title {
						padding-left: 20rpx;
						font-size: 26rpx;
						color: #333;
						line-height: 80rpx;
					}
					// 最近播放记录
					.recentScroll {
						/* #ifdef MP-WEIXIN */
						display: flex;
						/* #endif */
						height: 240rpx;
						/* #ifdef H5 */
						white-space: nowrap; // H5支持横向排列滚动必须加的属性
						/* #endif */
						
						.recentItem {
							/* #ifdef H5 */
							display: inline-block;// H5支持
							/* #endif */
							margin-right: 20rpx;
							width: 200rpx;
							image {
								width: 200rpx;
								height: 200rpx;
								border-radius: 10rpx;
							}
							text {
								font-size: 26rpx;
								// margin-left: 10rpx;
								text-align: center;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical; /*设置对其模式*/
								-webkit-line-clamp: 2;
							}
						}
					}
					.txt {
						font-size: 20rpx;
						margin-left: 20rpx;
						text-align: center;
						color: #808080;
						height: 80rpx;
						line-height: 80rpx;
					}
				}
				.cardList {
					margin-top: 20rpx;
					.likeMusic {
						// 纵向排列
						display: flex;
						border-top: 1rpx solid #eee;
						padding: 20rpx 10rpx;
						image {
							width: 100rpx;
							height: 100rpx;
							border-radius: 8rpx;
						}
						.likeMusicInfo {
							display: flex;
							flex-direction: column;
							margin-left: 20rpx;
							text {
								height: 50rpx;
								line-height: 50rpx;
								font-size: 24rpx;
								white-space: nowrap; // 不允许换行
								
							}
						}
					}
					.txt1,.txt2,.txt3 {
						border-top: 1rpx solid #eee;
						font-size: 20rpx;
						margin-left: 20rpx;
						height: 150rpx;
						line-height: 150rpx;
						text-align: center;
						color: #808080;
						
					}
					.card-item{
						border-top: 1rpx solid #eee;
						.title {
							padding-left: 20rpx;
							color: #bbb;
							font-size: 20rpx;
						}
						.songSheetScroll {
							
							.scrollItem {
								position: relative;
								// 纵向排列
								display: flex;
								margin: 5rpx 0 20rpx  20rpx;
								image {
									width: 100rpx;
									height: 100rpx;
									border-radius: 8rpx;
								}
								.mySongSheet {
									display: flex;
									// 改变flex布局 纵向排列
									flex-direction: column;
									margin-left: 20rpx;
									
									text {
										height: 50rpx;
										line-height: 50rpx;
										font-size: 24rpx;
										white-space: nowrap; // 不允许换行
									}
								}
							}
						}
					}
				
				}
			}
		}
	
		
	}
</style>
